<template>
  <x-main>
    <view class="brief x-container">
      <view class="x-space-between">
        <view><text class="money">{{billInfo.billAmount || 0}}</text><text class="unit">元</text></view>
        <view class="status">{{format(billInfo.billState)}}</view>
      </view>
      <view class="desc">{{billInfo.orderRemark || '-'}}</view>
    </view>

    <view v-if="! $emptyArray(state.list)" class="x-box">
      <x-box title="账单最新操作记录">
        <x-cell @click="onShowRecord" :title="firstTitle" :border="false" value="详情" titleWidth="540rpx" :desc="firstDesc" isLink></x-cell>
      </x-box>
    </view>

    <!--  <view class="x-box">-->
    <!--    <x-preview title="本期金额明细" :data="state.order" :columns="columns">-->

    <!--    </x-preview>-->
    <!--  </view>-->

    <view class="x-box">
      <x-preview title="账单信息" :data="billInfo" :columns="billColumns">

      </x-preview>
    </view>

    <!--  <view class="x-box">-->
    <!--    <x-box title="逾期收款">-->
    <!--      <x-cell title="房租-1150元-逾期收款中" :border="false" titleWidth="400rpx" value="详情" isLink></x-cell>-->
    <!--    </x-box>-->
    <!--  </view>-->
    <!--    <view @click="onRedirectBillList" class="link">查看全部账期</view>-->
  </x-main>
  <x-bottom>
    <view @click="onPay" class="x-btn x-btn-primary">支付{{billInfo.billAmount}}元</view>
  </x-bottom>

  <x-popup title="账单操作记录" v-model="state.show">
    <x-record :list="state.list"></x-record>
  </x-popup>

</template>

<script setup>
import XPreview from '@/components/lib/preview';
import XPopup from '@/components/lib/popup';
import XRecord from '@/components/logic/record';
import billStore from '@/stores/modules/bill';
const BillStore = billStore();
const {billInfo} = storeToRefs(BillStore)
import {storeToRefs} from "pinia";
import {computed, reactive, ref} from "vue";
import {Helper, Constant} from "core";
import {onLoad} from "@dcloudio/uni-app";

const state = reactive({
  show: false,
  list:[
  ]
})

onLoad(async(option) => {
  await BillStore.getInfo(option.billId)
  let list = billInfo.value.operateInfoList;
  state.list = [];
  if(! Helper.emptyArray(list)) {
    list.forEach(e => {
      state.list.push({title: e.operateTime, desc: e.remark})
    })
  }
})

const columns = ref([
  {label: "本期金额", field: 'currentAmount'},
  {label: "违约金", field: 'f2'},
  {label: "其它费用", field: 'otherAmount'}
])

const billColumns = ref([
  {label: "还款日", field: 'billPaymentDate'},
  {label: "期数", field: 'currentPeriod', format:(option, data) => {
      return data.currentPeriod + "/" + data.totalPeriod + "期"
    }},
  {label: "用户姓名", field: 'userName'},
  {label: "用户手机号", field: 'userPhone'},
  // {label: "自动代扣", field: 'f5'}
])

const firstTitle = computed(() => {
  let list = state.list;
  if(! Helper.emptyArray(list)) {
    return list[0].desc;
  }
  return "";
});


const firstDesc = computed(() => {
  let list = state.list;
  if(! Helper.emptyArray(list)) {
    return list[0].title;
  }
  return "";
});

const onRedirectBillList = () => {
  uni.navigateTo({url: "/pages/bill/list"})
}

const onPay = async () => {
  let isOk = await BillStore.pay(billInfo.value.billId);
}

const format = (value) => {
  let obj =  Constant.BILL.STATUS.find(x => x.value == value);
  if(Helper.emptyJson(obj)) {
    return "";
  }
  return obj.label;
}

const onShowRecord = () => {
  state.show = true;
}
</script>

<style scoped lang="less">
.x-box {
  background-color: #ffffff;
  margin-bottom: 20rpx;
}

.brief {
  padding-bottom: 30rpx;
  box-sizing: border-box;
  .money {
    color: @primary;
    font-size: 64rpx;
  }

  .unit {
    color: @primary;
    font-size: 26rpx;
  }

  .status {
    color: #999999;
    font-size: 28rpx;
  }

  .desc {
    color: #999999;
    font-size: 28rpx;
  }
}

.link {
  text-align: center;
  color: @primary;
}

.data {
  color: #999999;
  font-size: 28rpx;
}

.btn-col2 {
  width: 50%;
}

.btn-col3 {
  width: 30%
}
</style>
